<template>
  <!-- 底部功能区 -->
  <div id="footerfun">
    <!-- 父标签页 -->
    <div class="faterTabs">
      <!-- 标签选项栏 -->
      <div class="faterTabsTop">
        <!-- 换图案标签标题 -->
        <div :class="style0" @click="tabClick(0)">
          <img class="changeImg" :src="change0" alt="换图案" />
          <span>换图案</span>
        </div>
        <!-- 换文字标签标题 -->
        <div :class="style1" @click="tabClick(1)" v-if="isShowText === 1">
          <img class="changeImg" :src="change1" alt="换文字" />
          <span>换文字</span>
        </div>
        <!-- 选文字底色标签标题 -->
        <div :class="style2" @click="tabClick(2)" v-if="isShowText === 1">
          <img class="changeImg1" :src="change2" alt="选文字底色" />
          <span>选文字底色</span>
        </div>
        <!-- 印名字标签标题 -->
        <div :class="style3" @click="tabClick(3)">
          <img class="changeImg" :src="change3" alt="印名字" />
          <span>印名字</span>
        </div>
      </div>

      <!-- 换图案内容区 -->
      <div v-if="fatherActive === 0" class="childrenTabs">
        <!-- 子标签选项栏 -->
        <div class="childrenTabsTop">
          <div
            class="childrenTabsTitle"
            v-for="(item, index) in customTemplateImageList"
            :key="item.templateCategoryId"
            @click="childrenTabClick(index)"
          >
            <div
              class="childrenTabsTitle1"
              :style="childrenActive !== index && childrenStyle.childrenStyle1"
            >
              {{ item.templateCategoryName }}
            </div>
            <div
              class="childrenTabsTitle2"
              :style="childrenActive !== index && childrenStyle.childrenStyle2"
            ></div>
          </div>
        </div>
        <!-- 子标签栏内容区 -->
        <div
          v-for="(item, index) in customTemplateImageList"
          :key="index"
          class="children"
        >
          <!-- 子标签包裹器 -->
          <div v-if="childrenActive == index" class="childrenWrapper">
            <!-- 图片包裹器 -->
            <div
              :class="nowImg == index && 'imgWrapper'"
              v-for="(item1, index) in item.customTemplateImageList"
              :key="item1.templateImageId"
              :style="{
                'background-image': 'url(' + item1.templateSmallImage + ')',
              }"
              @click="changImgClick(index, item1)"
            >
              <!-- 图片 -->
              <!-- <img
                :src="item.imageSrc"
                :alt="item.name"
                class="image"
                @click="changImgClick(index)"
              /> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 换文字内容区 -->
      <div v-if="fatherActive === 1" class="childrenTabs">
        <!-- 子标签选项栏 -->
        <div class="childrenTabsTop">
          <div
            class="childrenTabsTitle"
            v-for="(item, index) in customTemplateWordList"
            :key="item.templateCategoryId"
            @click="wordChildrenTabClick(index)"
          >
            <div
              class="childrenTabsTitle1"
              :style="
                wordChildrenActive !== index && childrenStyle.childrenStyle1
              "
            >
              {{ item.templateCategoryName }}
            </div>
            <div
              class="childrenTabsTitle2"
              :style="
                wordChildrenActive !== index && childrenStyle.childrenStyle2
              "
            ></div>
          </div>
        </div>
        <!-- 换文字子标签栏内容区 -->
        <van-swipe
          class="my-swipe"
          indicator-color="white"
          :show-indicators="false"
          :loop="false"
        >
          <van-swipe-item v-for="(item, index) in idiomData" :key="index">
            <div
              class="textChildrenItem1"
              v-for="(item1, index1) in item"
              :key="index1"
              :style="nowIdiom === index1 && idiomStyle"
              @click="idiomClick(index, index1)"
            >
              <span>{{ item1.templateWordName }}</span>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 选文字底色内容区 -->
      <div v-if="fatherActive === 2" class="selectText">
        <div class="selectTextWrapper">
          <!-- 形状 -->
          <div class="shape">
            <span>形状</span>
            <div class="shapeWrapper">
              <div
                v-for="(item, index) in shapeList"
                :key="item.templateGraphicId"
                :style="{
                  'background-image': 'url(' + item.templateGraphicImage + ')',
                }"
                :class="nowShape === index && 'clickShapeItem'"
                @click="shapeClick(index, item.templateGraphicId)"
              ></div>
            </div>
          </div>
          <!-- 颜色 -->
          <div class="color">
            <span>颜色</span>
            <div class="colorWrapper">
              <div
                v-for="(item, index) in colorNameData"
                :key="item.templateGraphicId"
                :style="{
                  'background-image': 'url(' + item.templateGraphicImage + ')',
                }"
                class=""
                @click="selectColorClick(index, item.templateGraphicId)"
              >
                <img
                  src="../images/select.png"
                  alt="选择"
                  v-if="nowColorName === index"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 印名字内容区 -->
    <div v-if="isShowSetName" class="setName">
      <div class="setNameWrapper">
        <!-- 印名字内容的头部 -->
        <div class="nameTitle">
          <img src="../images/nametitle.png" alt="名字" class="nametitleImg" />
          <span>输入您的姓名</span>
        </div>
        <!-- 印名字内容的主体 -->
        <div class="nameMain">
          <input type="text" v-model="inputName" @input="nameInput" />
          <span>{{ inputName.length }}/4</span>
        </div>
        <!-- 印名字内容的底部按钮 -->
        <div class="nameFooter">
          <div class="nameClose" @click="nameClose"><span>关闭</span></div>
          <div class="nameSubmit" @click="nameSubmit"><span>确认</span></div>
        </div>
      </div>
    </div>
    <!-- 立即下单 -->
    <div class="pay">
      <div class="payBtn">
        <!-- 无优惠券时显示 -->
        <div v-if="isShowCoupon === 0" class="noCoupon" @click="payClick">
          <span>立即下单</span>
        </div>
        <!-- 有优惠券时显示 -->
        <div v-if="isShowCoupon !== 0" class="coupon" @click="payClick">
          <span>立即下单</span>
          <span class="couponSpan">你有{{ isShowCoupon }}张未使用的优惠券</span>
        </div>
      </div>
    </div>
    <!-- <div>

    </div> -->
  </div>
</template>

<script>
import * as v3dAppAPI from "../v3dApp/model.js";
export default {
  name: "footerfun",
  data() {
    return {
      // 当前点击的父Tab
      fatherActive: 0,
      // 当前点击的图片子Tab
      childrenActive: 0,
      // 当前点击的成语子Tab
      wordChildrenActive: 0,
      // 所有图标
      src: [
        // 换图案的图标
        require("../images/changeImg.png"),
        // 换文字的图标
        require("../images/changeText.png"),
        // 选文字底色的图标
        require("../images/changeTextImg.png"),
        // 印名字的图标
        require("../images/setName.png"),
        // 点击换图案的图标
        require("../images/changeImg1.png"),
        // 点击换文字的图标
        require("../images/changeText1.png"),
        // 点击选文字底色的图标
        require("../images/changeTextImg1.png"),
        // 点击印名字的图标
        require("../images/setName1.png"),
      ],
      // 换图案图标
      change0: require("../images/changeImg1.png"),
      // 换文字图标
      change1: require("../images/changeText.png"),
      // 选文字底色图标
      change2: require("../images/changeTextImg.png"),
      // 印名字图标
      change3: require("../images/setName.png"),
      // 父标签页所有标签样式
      allStyle: [
        "faterTabsTitle faterTabsTitle1",
        "faterTabsTitle faterTabsTitle2",
        "faterTabsTitle faterTabsTitle3",
        "faterTabsTitle faterTabsTitle2",
        "faterTabsTitle faterTabsTitle1Click",
        "faterTabsTitle faterTabsTitle2Click",
        "faterTabsTitle faterTabsTitle3Click",
        "faterTabsTitle faterTabsTitle2Click",
      ],
      // 换图案样式
      style0: "faterTabsTitle faterTabsTitle1Click",
      // 换文字样式
      style1: "faterTabsTitle faterTabsTitle2",
      // 选文字底色样式
      style2: "faterTabsTitle faterTabsTitle3",
      // 印名字样式
      style3: "faterTabsTitle faterTabsTitle2",
      // 是否显示印名字弹窗
      isShowSetName: false,
      // 子标签标题样式
      childrenStyle: {
        childrenStyle1: "background-color:#f1f1f1;color:#333333",
        childrenStyle2: "display:none",
      },
      // 当前点击的图片
      nowImg: "0",
      // 当点击父标签的换图案时,获取换图案子标签数据
      changeImgTitleData: {
        0: {
          name: "吾皇万睡",
          content: "内容1",
        },
        1: {
          name: "胖虎来了",
          content: "内容2",
        },
        2: {
          name: "栋来也",
          content: "内容3",
        },
        3: {
          name: "栋来也",
          content: "内容4",
        },
        4: {
          name: "栋来也",
          content: "内容5",
        },
        5: {
          name: "栋来也",
          content: "内容6",
        },
        6: {
          name: "栋来也",
          content: "内容7",
        },
        7: {
          name: "栋来也",
          content: "内容3",
        },
        8: {
          name: "栋来也",
          content: "内容8",
        },
      },
      //当点击换图案子标签时,获取对应的图片数据
      changeImgData: {
        0: {
          name: "图片名1",
          imageSrc: require("../images/tuan2.png"),
          imagePath: "./v3dapp/Tex-printing.png",
          isShowText: 1,
        },
        1: {
          name: "图片名2",
          imageSrc: require("../images/tuan1.png"),
          imagePath: "./tuan1.png",
          isShowText: 1,
        },
        2: {
          name: "图片名3",
          imageSrc: require("../images/tuan3.png"),
          imagePath: "./tuan3.png",
          isShowText: 2,
        },
        3: {
          name: "图片名4",
          imageSrc: require("../images/changeImgList.png"),
          isShowText: 2,
        },
        4: {
          name: "图片名5",
          imageSrc: require("../images/changeImgList.png"),
          isShowText: 2,
        },
        5: {
          name: "图片名6",
          imageSrc: require("../images/changeImgList.png"),
          isShowText: 1,
        },
        6: {
          name: "图片名7",
          imageSrc: require("../images/changeImgList.png"),
          isShowText: 2,
        },
        7: {
          name: "图片名8",
          imageSrc: require("../images/changeImgList.png"),
          isShowText: 1,
        },
        8: {
          name: "图片名9",
          imageSrc: require("../images/changeImgList.png"),
          isShowText: 1,
        },
      },
      // 是否显示换文字和换文字底色
      isShowText: 1,
      // 是否有优惠券
      isShowCoupon: 0,
      // 成语数据
      idiomData: [],
      // 当前点击的成语下标
      nowIdiom: 0,
      // 当前点击的成语数据
      nowIdiomData: {},
      // 成语按钮点击样式
      idiomStyle: "border: #9c2e31 solid 1px;color: #9c2e31;",
      // 当前点击的颜色下标
      nowColorName: 0,
      // 当前点击的颜色id
      nowColorNameId: 5,
      // 颜色名字矩形样式
      rectangleStyle: "border: 0.0625rem #fc7867 solid;color: #fc7867;",
      // 所有颜色
      // colorNameData: ["#6EAFDE", "#F1C2C0", "#F0DA73"],
      // 形状+颜色
      // customTemplateColorMap: {
      //   "3-3": {
      //     templateColorImage:
      //       "https://custom-mall.zengapp.cn/test/template/colors/color-c1632473906000.png",
      //   },
      //   "1-1": {
      //     templateColorImage:
      //       "https://custom-mall.zengapp.cn/test/template/colors/color-c1632474015000.png",
      //   },
      //   "2-2": {
      //     templateColorImage:
      //       "https://custom-mall.zengapp.cn/test/template/colors/color-c1632473988000.png",
      //   },
      // },
      // 当前输入的名字
      inputName: "",
      // 当前确认的名字
      nowName: null,
      // 订单结果
      result: {
        productId: "",
        sourceType: 1,
        goodsId: "", //男/女款
        orderGoodsCustomName: "", //姓名
        // 底色图
        templateColor: {
          templateColorId: "", //图片id
          // 图片地址
          templateColorImage: "",
        },
        //图案
        templateImage: {
          // 图片id
          templateImageId: "",
          // 图案类型，1.图文组合，2.图
          templateImageType: "",
          // 图片地址
          templateOriginalImage: "",
        },
        // 文字
        templateWord: {
          // 文字id
          templateWordId: "",
          // 文字图片地址
          templateWordImage: "",
        },
      },
      // shapeList: [
      //   require("../images/shape1.png"),
      //   require("../images/shape2.png"),
      //   require("../images/shape3.png"),
      //   require("../images/shape4.png"),
      // ],
      // 当前选择的形状
      nowShape: 0,
      nowShapeId: 1,
      // 当前选择的图片底色
      selectColor: "1-5",

      // 后台获取的数据
      // 形状列表
      shapeList: [],
      // 颜色列表
      colorNameData: [],
      // 形颜结合
      customTemplateColorMap: [],
      // 图片列表
      customTemplateImageList: [],
      // 成语列表
      customTemplateWordList: [],
      // 当前选择的图片数据
      nowImageData: {},
      // 当前选择的底图数据
      nowColorData: {},
      // 默认数据
      cupBodyDefaultOut: {},
      // 请求参数
      requestData: { userId: "", goodsId: null, productId: null },
      // 当前选中的款式
      // goodsStyle:1,
      customTemplateSealList: [],
      // 姓名印章路径
      DImgPath: "",
      // 之前选中的成语标签下标
      beforeWordbqIndex: null,
      // 之前点击的成语下标
      beforeWordIndex: null,
    };
  },
  created() {
    // 获取url的参数,并初始化请求参数
    let goodsId = this.getUrlKey("goodsId");
    this.requestData.goodsId = goodsId;
    // this.goodsStyle = goodsId;
    let productId = this.getUrlKey("productId");
    this.requestData.productId = productId;
    let userId = this.getUrlKey("userId");
    this.requestData.userId = userId;

    // 获取后台数据
    this.getData();
    // console.log("requestData = ", this.requestData);
    // 初始化数据的定时器
    let timer = setInterval(() => {
      // console.log(v3dAppAPI.inittt());
      if (document.readyState === "complete") {
        if (v3dAppAPI.inittt() == 1) {
          // 默认颜色图
          v3dAppAPI.reShapeColor(
            this.cupBodyDefaultOut.customTemplateColorInfoOut.templateColorImage
          );
          // 默认图案
          v3dAppAPI.setImage(
            this.cupBodyDefaultOut.customTemplateImageOut.templateSmallImage,
            this.isShowText
          );
          // 默认成语
          v3dAppAPI.setIdiom(
            this.cupBodyDefaultOut.customTemplateWordOut.templateWordImage
          );

          // 默认名字
          // console.log(this.customTemplateColorMap[this.selectColor].templateColorImage);
          // v3dAppAPI.reShapeColor(
          //   this.customTemplateColorMap[this.selectColor].templateColorImage
          // );
          // 默认姓名
          v3dAppAPI.initName();
          window.clearInterval(timer);
        }
      }
    }, 500);
  },
  // 挂载完成
  mounted() {
    // 监听子页面向父页面的传参
    // let that = this;
    // window.onmessage = function (event) {
    //   console.log("接受上级页面传参");
    //   console.log("=======", event.data);
    //   // 初始化优惠券
    //   this.isShowCoupon = event.data.couponNum;
    // };
    //给bus绑定自定义事件
    this.$bus.$on("initModel", (data) => {
      // 显示加载器
      var loading = document.querySelectorAll(".loading");
      loading[0].style.display = "block";
      // console.log(data);
      // 获取图片路径
      let imagePath = this.nowImageData.templateSmallImage;
      // 获取成语图片路径
      let idiomPath = this.nowIdiomData.templateWordImage;
      // console.log(this.nowIdiomData);
      let templateColorImage = this.nowColorData.templateColorImage;
      let nameLength = this.nowName === null ? 3 : this.nowName.length;
      let name = this.nowName === null ? "冉维迅" : this.nowName;
      let DPath = this.DImgPath;
      // console.log("+++"+DPath);
      // console.log(name);
      if (data === "1") {
        // 当前款式
        this.requestData.goodsId = "1";
        v3dAppAPI.loadMan(
          this.isShowText,
          imagePath,
          idiomPath,
          templateColorImage,
          name,
          nameLength,
          DPath,
          () => {
            // console.log("模型加载完成");
            // 隐藏加载器
            loading[0].style.display = "none";
          }
        );
      } else {
        this.requestData.goodsId = "2";
        v3dAppAPI.loadWomen(
          this.isShowText,
          imagePath,
          idiomPath,
          templateColorImage,
          name,
          nameLength,
          DPath,
          () => {
            // console.log("模型加载完成");
            // 隐藏加载器
            loading[0].style.display = "none";
          }
        );
      }

      // // 设置姓名
      // v3dAppAPI.setNamejs(this.nowName, this.nowName.length);
    });
  },
  //销毁之前
  beforeDestroy() {
    //给bus解绑自定义事件,千万别什么都不写,会解绑所有
    this.$bus.$off("initModel");
  },
  methods: {
    tabClick(index) {
      // 如果点击的标签不为当前标签,且不是印名字
      if (this.fatherActive !== index && index !== 3) {
        // 要点击的图标名字
        let changeName1 = "change" + index;
        // 之前点击的图标名字
        let changeName2 = "change" + this.fatherActive;
        // 将要点击的图标改成点击状态的图片
        this[changeName1] = this.src[index + 4];
        // 将之前点击的图标改成未点击状态的图片
        this[changeName2] = this.src[this.fatherActive];

        // 要点击的图标名字
        let styleName1 = "style" + index;
        // 之前点击的图标名字
        let styleName2 = "style" + this.fatherActive;
        // 将要点击的样式改成点击状态的样式
        this[styleName1] = this.allStyle[index + 4];
        // 将之前点击的样式改成未点击状态的样式
        this[styleName2] = this.allStyle[this.fatherActive];

        //当前点击的标签索引赋值给fatherActive
        this.fatherActive = index;
      }
      // 如果印名字弹窗未显示且点击的是印名字
      if (!this.isShowSetName && index === 3) {
        this.isShowSetName = !this.isShowSetName;
      }
    },
    //点击印名字的内容时
    // setNameClick() {
    //   this.isShowSetName = !this.isShowSetName;
    // },
    // // 点击印名字白色框时
    // setNamenoClick(event) {
    //   // 阻止事件冒泡
    //   event.cancelBubble = true;
    // },
    // 点击图片子标签页标题时
    childrenTabClick(index) {
      if (this.childrenActive !== index) {
        //当前点击的标签索引赋值给childrenActive
        this.childrenActive = index;
      }
    },
    // 点击成语子标签页标题时
    wordChildrenTabClick(index) {
      if (this.wordChildrenActive !== index) {
        //当前点击的标签索引赋值给childrenActive
        this.wordChildrenActive = index;
        this.idiomData =
          this.customTemplateWordList[index].customTemplateWordList;

        // 默认选中的成语
        // for (let i = 0; i < this.idiomData.length; i++) {
        //   for (let j = 0; j < this.idiomData[i].length; j++) {
        //     console.log(this.idiomData[i][j].isDefault);
        //     if (this.idiomData[i][j].isDefault === 1) {
        //       this.nowIdiom = j;
        //       break;
        //     } else {
        //       this.nowIdiom = null;
        //     }
        //   }
        // }
      }
      if (this.beforeWordbqIndex === index) {
        this.nowIdiom = this.beforeWordIndex;
      } else {
        // 保存之前点击的成语下标
        this.beforeWordIndex = this.nowIdiom;
        this.nowIdiom = null;
      }
    },
    // 点击换图案的图片时
    changImgClick(index, itemData) {
      if (this.nowImg !== index) {
        // 保存当前点击的图片
        this.nowImg = index;
        // console.log(itemData);
        // console.log(this.changeImgData[index].name);
        //是否显示成语
        if (this.isShowText !== itemData.templateImageType) {
          if (itemData.templateImageType === 1) {
            v3dAppAPI.showtext();
          } else {
            v3dAppAPI.hidetext();
          }
        }
        // 是否显示姓名
        if (this.nowName !== null) {
          if (this.nowName.length === 0) {
            v3dAppAPI.hideAll();
          }
        }

        this.nowImageData = itemData;
        // console.log(this.nowImageData);
        // 是否显示换文字
        this.isShowText = itemData.templateImageType;
        // 获取图片路径
        let imagePath = itemData.templateSmallImage;
        // console.log(imagePath);
        // console.log(this.isShowText);
        v3dAppAPI.setImage(imagePath, this.isShowText);
        // console.log(imagePath);
      }
    },
    // 点击其中一个成语时
    idiomClick(index, index1) {
      if (this.nowIdiom !== index1) {
        // 保存当前点击的成语
        this.nowIdiom = index1;
        // 保存当前点击成语的标签下标
        this.beforeWordbqIndex = this.wordChildrenActive;
        this.nowIdiomData = this.idiomData[index][index1];
        // 获取成语图片路径
        let idiomPath = this.idiomData[index][index1].templateWordImage;
        v3dAppAPI.setIdiom(idiomPath);
        // console.log(idiomPath);
      }
    },
    // 点击其中一个颜色时
    selectColorClick(index, templateGraphicId) {
      if (this.nowColorName !== index) {
        // 保存当前点击的颜色
        this.nowColorName = index;
        this.nowColorNameId = templateGraphicId;
        // 获取当前点击的颜色值
        // let color = this.colorNameData[index];
        // 替换模型中的颜色
        // v3dAppAPI.setTextColor(color);
        // console.log(this.nowColorName);
        // console.log(color);
        this.selectColor = this.nowShapeId + "-" + this.nowColorNameId;
        // console.log(this.selectColor);
        this.nowColorData = this.customTemplateColorMap[this.selectColor];
        v3dAppAPI.reShapeColor(this.nowColorData.templateColorImage);
      }
    },
    // 名字输入框获取焦点时，实时监听输入框内容，实现最多输入4个字
    nameInput(e) {
      this.inputName = e.target.value.slice(0, 4);
    },
    // 点击关闭按钮时
    nameClose() {
      this.isShowSetName = !this.isShowSetName;
    },
    // 点击确认按钮时
    nameSubmit() {
      // var emailStr = "city252@qq.com";
      // 判断是否输入中文的正则表达式
      var chineseReg = /^[\u4e00-\u9fa5]{0,}$/;
      // console.log(chineseReg.test(this.inputName));
      // 如果输入的是中文则替换
      if (chineseReg.test(this.inputName)) {
        this.nowName = this.inputName;
        // console.log(this.nowName);
        if (this.nowName.length != 0) {
          this.DImgPath =
            this.customTemplateSealList[
              this.nowName.length - 1
            ].templateSealImage3d;
        }
        // console.log(DImgPath);
        v3dAppAPI.setNamejs(
          this.nowName,
          this.nowName.length,
          this.isShowText,
          this.DImgPath
        );
        this.isShowSetName = !this.isShowSetName;
      } else {
        this.$toast("仅支持汉字");
      }
    },
    // 点击立即下单按钮时
    payClick() {
      // 姓名
      this.result.orderGoodsCustomName = this.nowName;
      // 款式
      // if (this.requestData.goodsId) {
      this.result.goodsId = this.requestData.goodsId;
      // } else {
      //   this.result.goodsId = "1";
      // }

      // if (this.requestData.productId) {
      this.result.productId = this.requestData.productId;
      // } else {
      //   this.result.productId = "1";
      // }
      // 底图颜色
      this.result.templateColor.templateColorId =
        this.nowColorData.templateColorId;
      this.result.templateColor.templateColorImage =
        this.nowColorData.templateColorImage;
      // 图案
      // console.log(this.nowImageData);
      this.result.templateImage.templateImageId =
        this.nowImageData.templateImageId;
      this.result.templateImage.templateImageType =
        this.nowImageData.templateImageType;
      this.result.templateImage.templateOriginalImage =
        this.nowImageData.templateSmallImage;
      // 文字
      // console.log(this.nowIdiomData);
      this.result.templateWord.templateWordId =
        this.nowIdiomData.templateWordId;
      this.result.templateWord.templateWordImage =
        this.nowIdiomData.templateWordImage;
      console.log(this.result);
      // 将数据发送给另一个页面
      window.parent.postMessage(this.result, "*");
    },
    // 点击其中一个形状
    shapeClick(index, templateGraphicId) {
      if (this.nowShape !== index) {
        this.nowShape = index;
        this.nowShapeId = templateGraphicId;
        // console.log(this.nowShape);
        this.selectColor = this.nowShapeId + "-" + this.nowColorNameId;
        this.nowColorData = this.customTemplateColorMap[this.selectColor];
        // console.log(this.selectColor);
        v3dAppAPI.reShapeColor(this.nowColorData.templateColorImage);
      }
    },
    // 获取后台数据的方法
    async getData() {
      // console.log("------");
      // console.log(this.requestData);
      const { data: res } = await this.$http.post(
        "getCustomTemplate",
        this.requestData
      );
      console.log(res);
      // 获取失败
      if (res.code != 200) {
        console.log(res.msg);
      } else {
        // 形颜结合列表
        this.customTemplateColorMap =
          res.data.customTemplateColorOut.customTemplateColorMap;
        // 颜色列表
        this.colorNameData =
          res.data.customTemplateColorOut.customTemplateGraphicColorList;
        // 循环设置颜色的默认选中
        for (let i = 0; i < this.colorNameData.length; i++) {
          if (this.colorNameData[i].isDefault === 1) {
            this.nowColorName = i;
            this.nowColorNameId = this.colorNameData[i].templateGraphicId;
            break;
          }
        }
        // 形状列表
        this.shapeList =
          res.data.customTemplateColorOut.customTemplateGraphicList;
        // 循环设置形状的默认选中
        for (let i = 0; i < this.shapeList.length; i++) {
          if (this.shapeList[i].isDefault === 1) {
            this.nowShape = i;
            this.nowShapeId = this.shapeList[i].templateGraphicId;
            break;
          }
        }
        // 图片列表
        this.customTemplateImageList = res.data.customTemplateImageList;
        // 循环设置图片标签的默认选中
        for (let i = 0; i < this.customTemplateImageList.length; i++) {
          if (this.customTemplateImageList[i].isDefault === 1) {
            this.childrenActive = i;
            for (
              let j = 0;
              j <
              this.customTemplateImageList[i].customTemplateImageList.length;
              j++
            ) {
              if (
                this.customTemplateImageList[i].customTemplateImageList[j]
                  .isDefault === 1
              ) {
                this.nowImg = j;
              }
            }
          }
        }
        // console.log(this.nowImageData);
        // 成语列表
        this.customTemplateWordList = res.data.customTemplateWordList;
        // console.log("---------------");
        // console.log(this.customTemplateWordList);
        // console.log("---------------");
        // 循环设置成语标签的默认选中
        for (let i = 0; i < this.customTemplateWordList.length; i++) {
          // console.log(i);
          // console.log(this.customTemplateWordList[i].isDefault);
          if (this.customTemplateWordList[i].isDefault === 1) {
            // 当前点击的成语标签下标
            this.wordChildrenActive = i;
            // 默认选中的成语标签下标
            this.beforeWordbqIndex = i;
            for (
              let j = 0;
              j < this.customTemplateWordList[i].customTemplateWordList.length;
              j++
            ) {
              for (
                let k = 0;
                k <
                this.customTemplateWordList[i].customTemplateWordList[j].length;
                k++
              ) {
                // console.log(",.,.d,asd,,.s");
                // console.log(this.customTemplateWordList[i].customTemplateWordList[j][k].isDefault);
                if (
                  this.customTemplateWordList[i].customTemplateWordList[j][k]
                    .isDefault === 1
                ) {
                  this.nowIdiom = k;
                  // console.log(this.nowIdiom);
                  break;
                } else {
                  this.nowIdiom = null;
                  // console.log(this.nowIdiom);
                }
              }
            }
          }
        }
        // 当前成语标签内容
        this.idiomData = this.customTemplateWordList[0].customTemplateWordList;

        // 默认数据
        this.cupBodyDefaultOut = res.data.cupBodyDefaultOut;
        // console.log(this.cupBodyDefaultOut.customTemplateImageOut);
        // 初始化数据
        this.nowImageData = this.cupBodyDefaultOut.customTemplateImageOut;
        this.nowIdiomData = this.cupBodyDefaultOut.customTemplateWordOut;
        // 初始化颜色底图数据
        // this.nowShapeId = this.shapeList[0].templateGraphicId;
        // this.nowColorNameId = this.colorNameData[0].templateGraphicId;
        // this.selectColor = this.nowShapeId + "-" + this.nowColorNameId;
        this.nowColorData = this.cupBodyDefaultOut.customTemplateColorInfoOut;
        this.nowName = this.cupBodyDefaultOut.customDefaultName;
        this.inputName = this.cupBodyDefaultOut.customDefaultName;
        // console.log("---------");
        // console.log(this.nowIdiomData);

        // 优惠券数量
        // console.log(res.data.unusedCouponCount);
        this.isShowCoupon = res.data.unusedCouponCount;

        // 款式列表
        // console.log(res.data.productGoodList);
        // 将款式列表传给rightbtn组件
        this.$bus.$emit("getProductGoodList", res.data.productGoodList);

        // 印章列表
        // console.log("_________");
        this.customTemplateSealList = res.data.customTemplateSealList;
        this.DImgPath = this.customTemplateSealList[2].templateSealImage3d;
        // console.log(this.customTemplateSealList);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 底部功能区
#footerfun {
  width: 100%;
  height: 31.8%;
  position: absolute;
  // background-color: white;
  // background-color: #caf0f8;
  top: 68.2%;
}
// 父标签页
.faterTabs {
  width: 100%;
  height: 74.5%;
  // background-color: white;
  position: relative;
  // 父标签标题栏
  .faterTabsTop {
    width: 100%;
    height: 23.5%;
    background-color: #e0e0e0;
    display: flex;
    align-items: flex-end;
    // justify-content: center;
    justify-content: flex-start;
    color: #666;
    font-size: 0.875rem;
    line-height: 1.875rem;
    // text-align: center;
    // 标签统一样式
    .faterTabsTitle {
      border-radius: 0.625rem 0.625rem 0 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-left: 0.4375rem;
    }
    // 换图案未点击样式
    .faterTabsTitle1 {
      width: 21.7%;
      height: 75%;
      background-color: #ececec;
    }
    // 换文字和印名字未点击样式
    .faterTabsTitle2 {
      width: 21.7%;
      height: 75%;
      margin-left: 1.2077%;
      background-color: #ececec;
    }
    // 选文字底色未点击样式
    .faterTabsTitle3 {
      width: 27.8%;
      height: 75%;
      margin-left: 1.2077%;
      background-color: #ececec;
    }
  }
}
// 换图案换文字印名字图片样式
.changeImg {
  width: 1rem;
  margin-right: 0.3125rem;
  display: inline-block;
  margin-bottom: 0.375rem;
}
// 选文字底色图片样式
.changeImg1 {
  width: 1rem;
  margin-right: 0.3125rem;
  display: inline-block;
  margin-bottom: 0.375rem;
}
// 换图案点击样式
.faterTabsTitle1Click {
  width: 21.7%;
  color: #b02226;
  height: 90%;
  background-color: white;
}
// 换文字和印名字点击样式
.faterTabsTitle2Click {
  width: 21.7%;
  color: #b02226;
  height: 90%;
  margin-left: 1.2077%;
  background-color: white;
}
// 选文字底色点击样式
.faterTabsTitle3Click {
  width: 27.8%;
  color: #b02226;
  height: 90%;
  margin-left: 1.2077%;
  background-color: white;
}

// 子标签
.childrenTabs {
  width: 100%;
  height: 76.8%;
  overflow: hidden;
  background-color: white;
}
/deep/.my-swipe {
  height: 4.75rem;
  .van-swipe__track {
    .van-swipe-item {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // justify-content: space-around;
      padding: 0 0.5rem;
    }
  }
  .textChildrenItem1 {
    margin-left: 0.75rem;
    width: 28.5%;
    height: 2.125rem;
    border: #ececec solid 1px;
    // border: #9c2e31 solid 1px;
    border-radius: 0.3125rem;
    line-height: 2.125rem;
    text-align: center;
    margin-bottom: 0.5rem;
    span {
      font-size: 0.875rem;
    }
  }
}
// 子标签栏
.childrenTabsTop {
  width: 100%;
  height: 38.4%;
  background-color: white;
  display: flex;
  align-items: flex-end;
  padding: 0 0.625rem;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

  // 子标签标题
  .childrenTabsTitle {
    // width: 19.3%;
    width: auto;
    height: 68%;
    flex-shrink: 0;
    // background-color: #f1f1f1;
    position: relative;
    margin-left: 0.625rem;
    margin-bottom: 0.25rem;
    // 点击时的样式
    .childrenTabsTitle1 {
      width: 100%;
      padding: 0 0.625rem;
      height: 82.35%;
      background-color: #b02226;
      color: white;
      line-height: 1.75rem;
      border-radius: 0.375rem;
      text-align: center;
      font-size: 0.875rem;
    }
    // 点击时的样式
    .childrenTabsTitle2 {
      // 绘制一个倒三角形,且底部为圆角
      width: 0.625rem;
      height: 0.625rem;
      background-color: #b0222600;
      position: absolute;
      left: 50%;
      margin-top: -0.0625rem;
      transform: translate(-50%, -50%) rotateZ(45deg);
      // border-radius: 0 0 0.1875rem 0;
      background: linear-gradient(135deg, transparent 50%, #b02226 0%);
      // background-size: 10px 10px;
      border-bottom-right-radius: 3px;
    }
  }
}

// 子标签内容
.children {
  overflow: hidden;
}
// 子标签内容包裹器
.childrenWrapper {
  width: 100%;
  // height: 61.6%;
  background-color: white;
  padding: 0 0.625rem;
  // padding-left: 0.625rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 图片包裹器
  div {
    width: 4.46125rem;
    height: 4.46125rem;
    // padding-bottom: 100%;
    overflow: hidden;
    margin-left: 0.875rem;
    margin-top: 0.1875rem;
    flex-shrink: 0;
    border-radius: 0.3125rem;
    background-color: rgb(233, 226, 218);
    display: flex;
    align-items: center;
    justify-content: center;
    // padding: 0.125rem;
    // background-image: url("../images/tuan3.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    // background-origin: content-box;
    // 图片
    // .image {
    //   // 图片宽度
    //   width: 80%;
    //   // 图片高度
    //   height: auto;
    //   // 块元素
    //   display: block;
    // }
  }
  .imgWrapper {
    border: 1px solid rgb(156, 46, 49);
  }
}

// 换文字子标签栏内容区
.textChildren {
  width: 100%;
  // height: 61.6%;
  background-color: white;
  padding: 0 0.625rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 换文字的item,两个成语为一组
  .textChildrenItem {
    flex-shrink: 0;
    width: 28.5%;
    height: 4.75rem;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    justify-content: flex-start;
    margin-left: 0.625rem;
    margin-top: 0.125rem;
    // background-color: #fae1dd;
    //成语按钮
    .textChildrenItem1 {
      width: 100%;
      height: 2.125rem;
      border: #ececec solid 1px;
      // border: #9c2e31 solid 1px;
      border-radius: 0.3125rem;
      line-height: 2.125rem;
      text-align: center;
      margin-bottom: 0.5rem;
      span {
        font-size: 0.875rem;
      }
    }
  }
}
// 选择文字底色区
.selectText {
  width: 100%;
  height: 76.8%;
  background-color: white;
  display: flex;
  align-items: center;
  overflow: hidden;
  .selectTextWrapper {
    // background-color: #90e0ef;
    width: 100%;
    height: 100%;
    // display: flex;
    // flex-direction: row;
    // flex-wrap: nowrap;
    // align-items: center;
    // overflow-y: scroll;
    // padding-right: 0.625rem;
    // &::-webkit-scrollbar {
    //   display: none;
    // }
  }
  .shape {
    width: 100%;
    height: 3.625rem;
    // background-color: #0096c7;
    margin-top: 1.5rem;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: row;
    span {
      flex-shrink: 0;
      display: inline-block;
      margin-top: 0.3125rem;
      font-size: 0.875rem;
    }
    .shapeWrapper {
      margin-left: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      overflow-y: scroll;
      padding-right: 0.625rem;
      &::-webkit-scrollbar {
        display: none;
      }
      div {
        flex-shrink: 0;
        width: 3.625rem;
        height: 3.625rem;
        // background-color: #2a9d8f;
        border: #ececec solid 1px;
        border-radius: 0.3125rem;
        margin-right: 1.25rem;
        // background-image: url("../images/shape1.png");
        background-repeat: no-repeat;
        background-size: contain;
      }
      .clickShapeItem {
        border: 1px solid rgb(156, 46, 49);
      }
    }
  }
  .color {
    width: 100%;
    height: 2.1875rem;
    // background-color: #0096c7;
    padding-left: 1.25rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: row;
    span {
      flex-shrink: 0;
      display: inline-block;
      margin-top: 0.3125rem;
      font-size: 0.875rem;
    }
    .colorWrapper {
      margin-left: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      overflow-y: scroll;
      padding-right: 0.625rem;
      &::-webkit-scrollbar {
        display: none;
      }
      div {
        flex-shrink: 0;
        width: 3.625rem;
        height: 2.1875rem;
        // background-color: #2a9d8f;
        // border: #ececec solid 1px;
        border-radius: 0.3125rem;
        margin-right: 0.625rem;
        // background-image: url("../images/shape1.png");
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
        img {
          position: absolute;
          right: 0.3125rem;
          bottom: 0.1875rem;
        }
      }
    }
  }
  // 每个颜色
  .selectTextItem {
    flex-shrink: 0;

    width: 4.25rem;
    height: 6.25rem;
    margin-left: 1.25rem;
    // background-color: #f8edeb;
    // 图片包裹器
    .TextimgWrapper {
      width: 100%;
      height: 4.25rem;
      border-radius: 0.5rem;
      // 图片
      .Textimg {
        padding: 10%;
        width: 80%;
      }
    }
    // 颜色名字
    .colorName {
      width: 100%;
      position: relative;
      margin-top: 0.625rem;
      // 三角形
      .triangle {
        // 绘制一个三角形,且上部为圆角
        width: 0.625rem;
        height: 0.625rem;
        background-color: #b0222600;
        position: absolute;
        left: 50%;
        // margin-top: .0625rem;
        border-top: solid 0.0625rem #fc7867;
        border-left: solid 0.0625rem #fc7867;
        transform: translate(-50%, -50%) rotateZ(45deg);
        background: linear-gradient(315deg, transparent 45%, #fff 0%);
        border-top-left-radius: 3px;
      }
      // 矩形
      .rectangle {
        width: 100%;
        height: 1.5625rem;
        background-color: white;
        color: #666;
        justify-content: center;
        border-radius: 0.375rem;
        font-size: 0.8125rem;
        display: flex;
        align-items: center;
        // 圆形
        .circular {
          width: 0.875rem;
          height: 0.875rem;
          background-color: #fc7867;
          border-radius: 50%;
          margin-right: 0.25rem;
        }
      }
    }
  }
}

// 印名字显示框
.setName {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  // 印名字内容区
  .setNameWrapper {
    width: 91%;
    height: 12.75rem;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.625rem;
    padding: 0 1.5625rem;
    // 印名字内容头部
    .nameTitle {
      width: 100%;
      height: 31%;
      // background-color: #48cae4;
      display: flex;
      align-items: center;
      // 图片
      .nametitleImg {
        width: 1.4375rem;
        height: 1.4375rem;
        margin-right: 0.625rem;
      }
    }
    .nameMain {
      width: 100%;
      height: 27%;
      background-color: #e8e8e8;
      border-radius: 0.625rem;
      input {
        width: 85%;
        height: 100%;
        background-color: #e8e8e8;
        border-radius: 0.625rem;
        padding: 0 1.25rem;
      }
      span {
        color: #9c2e31;
      }
    }
    .nameFooter {
      width: 100%;
      height: 42%;
      // background-color: #ffe8d6;
      display: flex;
      align-items: center;
      justify-content: center;
      .nameClose {
        width: 40%;
        height: 2.5rem;
        background-color: #ffefee;
        border-radius: 1.25rem;
        text-align: center;
        line-height: 2.5rem;
        color: #9c2e31;
        margin-right: 1rem;
      }
      .nameSubmit {
        width: 40%;
        height: 2.5rem;
        border-radius: 1.25rem;
        text-align: center;
        line-height: 2.5rem;
        background-image: linear-gradient(
          to right,
          rgb(241, 77, 44),
          rgb(215, 9, 0)
        );
        color: #fff;
      }
    }
  }
}

// 立即下单区
.pay {
  width: 100%;
  height: 25.5%;
  background-color: white;
  position: absolute;
  // 立即下单按钮
  .payBtn {
    width: 80%;
    height: 74%;
    background-image: linear-gradient(
      to right,
      rgb(241, 77, 44),
      rgb(215, 9, 0)
    );
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2.65625rem;
    // 没有优惠券时显示
    .noCoupon {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    // 有优惠券时显示
    .coupon {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;

      // 优惠券文字
      .couponSpan {
        font-size: 0.75rem;
      }
    }
  }
}

@media (min-width: 768px) {
  .faterTabs .faterTabsTop .faterTabsTitle span {
    font-size: 1.375rem;
  }
  .faterTabs .faterTabsTop {
    line-height: 2.25rem;
  }
  .changeImg {
    width: 1.5rem;
  }
  .changeImg1 {
    width: 1.5rem;
  }
  .childrenTabsTop .childrenTabsTitle .childrenTabsTitle1 {
    font-size: 1.375rem;
    line-height: 2.375rem;
  }
  .childrenTabsTop .childrenTabsTitle .childrenTabsTitle2 {
    width: 1rem;
    height: 1rem;
  }
  .childrenWrapper div {
    width: 6.25rem;
    height: 6.25rem;
  }
  .pay .payBtn {
    font-size: 1.5rem;
  }
  .pay .payBtn .coupon .couponSpan {
    font-size: 1.125rem;
  }
  .textChildren .textChildrenItem {
    height: 6.75rem;
  }
  .textChildren .textChildrenItem .textChildrenItem1 {
    height: 3.125rem;
    line-height: 3.125rem;
    font-size: 1.375rem;
  }
  .my-swipe {
    height: 6.75rem;
    .van-swipe__track {
      .van-swipe-item {
        padding: 0 0;
      }
    }
  }
  .my-swipe .textChildrenItem1 {
    height: 3.125rem;
    line-height: 3.125rem;
    margin-left: 1.25rem;
    span {
      font-size: 1.375rem;
    }
  }
  .selectText .selectTextItem {
    width: 6.25rem;
    height: 8.25rem;
  }
  .selectText .selectTextItem .TextimgWrapper {
    height: 6.25rem;
  }
  .selectText .selectTextItem .colorName .rectangle {
    height: 2.125rem;
    font-size: 1.125rem;
  }
  .selectText .selectTextItem .colorName .triangle {
    width: 0.75rem;
    height: 0.75rem;
  }
  .selectText .selectTextItem .colorName .rectangle .circular {
    width: 1.125rem;
    height: 1.125rem;
  }
  .setName .setNameWrapper {
    height: 20rem;
  }
  .setName .setNameWrapper .nameTitle {
    font-size: 1.5rem;
  }
  .setName .setNameWrapper .nameTitle .nametitleImg {
    width: 2.5rem;
    height: 2.5rem;
  }
  .setName .setNameWrapper .nameFooter .nameClose {
    height: 3.75rem;
    line-height: 3.75rem;
    border-radius: 1.875rem;
    font-size: 1.625rem;
  }
  .setName .setNameWrapper .nameFooter .nameSubmit {
    height: 3.75rem;
    line-height: 3.75rem;
    border-radius: 1.875rem;
    font-size: 1.625rem;
  }
  .setName .setNameWrapper .nameMain {
    font-size: 1.625rem;
  }
  .textChildren .textChildrenItem .textChildrenItem1 span {
    font-size: 1.375rem;
  }
  .selectText .shape {
    height: 5.625rem;
  }
  .selectText .shape .shapeWrapper div {
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 0.5rem;
  }
  .selectText .color {
    height: 3.125rem;
    margin-top: 0.9375rem;
  }
  .selectText .color .colorWrapper div {
    width: 5.625rem;
    height: 3.125rem;
    border-radius: 0.5rem;
    img {
      width: 1.25rem;
      height: 1.25rem;
      right: 0.4375rem;
      bottom: 0.3125rem;
    }
  }
  .selectText .color span {
    margin-top: 0.1875rem;
  }
  .selectText .shape span {
    font-size: 1.375rem;
  }
  .selectText .color span {
    font-size: 1.375rem;
  }
}

@media (min-width: 1024px) {
  .childrenWrapper div {
    width: 8.75rem;
    height: 8.75rem;
  }
  .faterTabs .faterTabsTop {
    line-height: 3.25rem;
  }
  .faterTabs .faterTabsTop .faterTabsTitle span {
    font-size: 2rem;
  }
  .changeImg {
    width: 2.125rem;
  }
  .changeImg1 {
    width: 2.125rem;
  }
  .childrenTabsTop .childrenTabsTitle .childrenTabsTitle1 {
    font-size: 2rem;
    line-height: 3.375rem;
  }
  .textChildren .textChildrenItem {
    height: 9.75rem;
  }
  .textChildren .textChildrenItem .textChildrenItem1 {
    height: 4.125rem;
    line-height: 4.125rem;
    font-size: 1.625rem;
  }
  .my-swipe {
    height: 9.75rem;
  }
  .my-swipe .textChildrenItem1 {
    height: 4.125rem;
    line-height: 4.125rem;
    margin-left: 1.25rem;
    span {
      font-size: 1.625rem;
    }
  }
  .pay .payBtn {
    font-size: 1.75rem;
  }
  .pay .payBtn .coupon .couponSpan {
    font-size: 1.375rem;
  }

  .selectText .selectTextItem {
    width: 8.25rem;
    height: 10.25rem;
  }
  .selectText .selectTextItem .TextimgWrapper {
    height: 8.25rem;
  }
  .selectText .selectTextItem .colorName .rectangle {
    height: 3rem;
    font-size: 1.5rem;
  }
  .selectText .selectTextItem .colorName .triangle {
    width: 0.75rem;
    height: 0.75rem;
  }
  .selectText .selectTextItem .colorName .rectangle .circular {
    width: 1.5rem;
    height: 1.5rem;
  }
  .textChildren .textChildrenItem .textChildrenItem1 span {
    font-size: 2rem;
  }
  .selectText .shape {
    height: 7.5rem;
  }
  .selectText .shape .shapeWrapper div {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 0.625rem;
  }
  .selectText .color {
    height: 4.0625rem;
    margin-top: 1.375rem;
  }
  .selectText .color .colorWrapper div {
    width: 7.5rem;
    height: 4.0625rem;
    border-radius: 0.625rem;
    img {
      width: 1.625rem;
      height: 1.625rem;
      right: 0.625rem;
      bottom: 0.5rem;
    }
  }
  .selectText .color span {
    margin-top: 0.1875rem;
  }
  .selectText .shape span {
    font-size: 2rem;
  }
  .selectText .color span {
    font-size: 2rem;
  }
}
@media (max-width: 375px) {
  .my-swipe .textChildrenItem1 {
    margin-bottom: 0.3125rem;
  }
  .childrenWrapper div {
    width: 4rem;
    height: 4rem;
  }
  .selectText .shape {
    height: 3.125rem;
  }
  .selectText .shape .shapeWrapper div {
    width: 3.125rem;
    height: 3.125rem;
  }
  .selectText .color {
    height: 1.875rem;
    margin-top: 0.625rem;
  }
  .selectText .color .colorWrapper div {
    width: 3.125rem;
    height: 1.875rem;
    img {
      width: 0.75rem;
      height: 0.75rem;
      right: 0.25rem;
      bottom: 0.1875rem;
    }
  }
  .selectText .color span {
    margin-top: 0.1875rem;
  }
}

@media (max-width: 375px) and (min-height: 750px) {
  .pay .payBtn {
    top: 35%;
  }
  .childrenTabsTop .childrenTabsTitle .childrenTabsTitle1 {
    line-height: 2rem;
  }
  .selectText .color {
    margin-top: 1.25rem;
  }
  .my-swipe .textChildrenItem1 {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 320px) {
  .my-swipe {
    height: 4.125rem;
  }
  .my-swipe .textChildrenItem1 {
    height: 1.75rem;
    line-height: 1.75rem;
    span {
      font-size: 0.75rem;
    }
  }
  .childrenWrapper div {
    width: 3.25rem;
    height: 3.25rem;
  }
  .faterTabsTop {
    line-height: 1.5625rem !important;
  }
  .faterTabsTitle {
    font-size: 0.75rem;
  }
  .changeImg {
    width: 0.875rem;
  }
  .changeImg1 {
    width: 0.875rem;
  }
  .childrenTabsTitle1 {
    font-size: 0.75rem !important;
    line-height: 1.5rem !important;
  }
  .payBtn {
    font-size: 0.875rem !important;
  }
  .textChildrenItem1 {
    height: 1.75rem !important;
    line-height: 1.75rem !important;
  }
  .selectTextItem {
    width: 3.5rem !important;
    height: 5.25rem !important;
  }
  .TextimgWrapper {
    height: 3.5rem !important;
  }
  .rectangle {
    font-size: 0.75rem !important;
  }
  .circular {
    width: 0.75rem !important;
    height: 0.75rem !important;
    margin-right: 0.125rem !important;
  }
  .setNameWrapper {
    height: 11.25rem !important;
  }
  .textChildren .textChildrenItem .textChildrenItem1 span {
    font-size: 0.75rem;
  }
  .selectText .shape {
    height: 2.6875rem;
  }
  .selectText .shape .shapeWrapper div {
    width: 2.6875rem;
    height: 2.6875rem;
  }
  .selectText .color {
    height: 1.625rem;
    margin-top: 0.5rem;
  }
  .selectText .color .colorWrapper div {
    width: 2.6875rem;
    height: 1.625rem;
    img {
      width: 0.625rem;
      height: 0.625rem;
      right: 0.25rem;
      bottom: 0.125rem;
    }
  }
  .selectText .color span {
    margin-top: 0.1875rem;
  }
  .selectText .shape span {
    font-size: 0.75rem;
  }
  .selectText .color span {
    font-size: 0.75rem;
  }
}
</style>